import React, { useRef, useCallback, useMemo } from 'react';
import { TablePage, Configure, SettingProvider, LayoutSetting } from 'xuanyue';
import { toFixedMoney } from '../../src/utils/utils';
// import SettingProvider from '../components/context/settingProvider';

export default () => {
  Configure.init({
    client: 5,
  });
  const actionRef = useRef();
  const columnsFilter = useMemo(
    () => [
      {
        label: '客户',
        value: 'customerId',
        listArr: [{id: 1,name:'客户1'}],
        inputType: 'select', // text  select
        keyValue: ['name', 'id'], // 默认是name 和id
      },
      {
        label: '客户1',
        value: 'customerId1',
        listArr: [{id: 1,name:'客户1'}],
        inputType: 'select', // text  select
        keyValue: ['name', 'customerNo'], // 默认是name 和id
      },
      {
        label: '客户2',
        value: 'customerId2',
        listArr: [{id: 1,name:'客户1'}],
        inputType: 'select', // text  select
        keyValue: ['name', 'customerNo'], // 默认是name 和id
      },
      {
        label: '客户3',
        value: 'customerId23',
        listArr: [{id: 1,name:'客户1'}],
        inputType: 'select', // text  select
        keyValue: ['name', 'customerNo'], // 默认是name 和id
      },
      {
        label: '最终还款日期',
        inputType: 'dataRange',
        value: ['lastRepaymentDateStart', 'lastRepaymentDateEnd'],
      },
    ],
    [],
  );
  const plainColumns = useMemo(
    () => [
      {
        title: '客户',
        dataIndex: 'customerName',
        width: 150,
      },
      {
        title: '进口合同号',
        dataIndex: 'importContractCode',
        width: 150,
      },
      {
        title: '应还手续费(人民币)',
        dataIndex: 'serviceFeePayable',
        width: 150,
        render: (text) => {
          return toFixedMoney(text);
        },
      },
      {
        title: '应还总额(人民币)',
        dataIndex: 'totalPayable',
        width: 150,
        render: (text) => {
          return toFixedMoney(text);
        },
      },
      {
        title: '实际还款总额(人民币)',
        dataIndex: 'totalPaid',
        width: 170,
        render: (text) => {
          return toFixedMoney(text);
        },
      },
      {
        title: '操作',
        dataIndex: 'opton',
        fixed: 'right',
        width: 100,
        render: (text, record) => {
          const popconfirmProps = {
            title: '确定删除吗?',
            placement: 'topRight',
            onConfirm: () => {
              // tableListOnDelete(record);
            },
            okText: '确定',
            cancelText: '取消',
          };
          return (
            <span>
              <a
                style={{ marginRight: '8px' }}
                onClick={() => {
                  // tableListOnEdit(record);
                }}
              >
                查看
              </a>
              <Popconfirm {...popconfirmProps}>
                <a style={{ marginRight: '8px' }}>删除</a>
              </Popconfirm>
            </span>
          );
        },
      },
    ],
    [],
  );
  const listTableHeader = useCallback((tool) => {
    const extra = (actionRef.current && actionRef.current.getExtra()) || {};
    const count = extra.count || {};
    const condition =
      (actionRef.current &&
        actionRef.current.filterRef &&
        actionRef.current.filterRef.getValues()) ||
      {};
    return (
      <div>
        <div style={{ display: 'flex', marginBottom: 8 }}>
          <div style={{ marginLeft: 'auto', marginTop: '6px' }}>{tool}</div>
        </div>
      </div>
    );
  }, []);
  return (
    <SettingProvider>
      <div>
        <TablePage
          page="tradeFinanceOrder21212"
          rowKey="id"
          tableHeader={listTableHeader}
          columnsFilter={columnsFilter}
          columns={plainColumns}
        />
        <div>
          <LayoutSetting />
        </div>
      </div>
    </SettingProvider>
  );
};
